/* 
1 想要正确的显示 /home/index ||  /home/found
  1 浏览器的url 必须 是  /home/index
  2 tabbar中的tabbar.item 组件的 selected属性必须为true
  3 如何解决
    1 如何实现  页面的url(this.props.location.pathname) 和 tabbar.item 属性 值 一直 
      1 首页 
      selected={ 当前的url === 首页 }
      2  找房 
      selected={ 当前的url === 找房 }
2 点击 tabbar的小标题 实现 页面的切换 和 tabbar的激活选中、
  1 点击 tabbar的小标题 实现 路由的切换
    this.props.history.push(页面的路径)
3 当 页面的url 是 "/" 或者 "/home"的时候 都希望它 交给  
  1 Home组件来显示
  2 最后还希望 Home组件里面 的   /home/index 来显示 
  3 在 Home组件 初始化的时候 自己加一个 跳转 即可
    if(当前的url ==="/home")  
      跳转到 /home/index 
 */

import React, { lazy } from "react";
import { TabBar } from 'antd-mobile';
import { Route } from "react-router-dom";
// 首页 注意
const Index = lazy(() => import("../index/index.js"));
// 找房
const Found = lazy(() => import("../found"));
// 资讯
const News = lazy(() => import("../news"));
// 我的
const Mind = lazy(() => import("../mind"));


class Home extends React.Component {
  // 一般用来组件的初始化工作 
  constructor(props) {
    super(props);
    if (this.props.location.pathname === "/home") {
      this.props.history.push("/home/index");
    }
  }

  // 负责显示组件的标签 视图
  render() {
    const { location, history } = this.props;
    return (
      <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#21b97a"
          barTintColor="white"
        >
          <TabBar.Item
            title="首页"
            key="home"
            icon={<i className="iconfont icon-ind"></i>}
            selectedIcon={<i className="iconfont icon-ind"></i>}
            selected={location.pathname === '/home/index'}
            onPress={() => history.push('/home/index')}
          >
            <Route component={Index} path="/home/index" ></Route>
          </TabBar.Item>
          <TabBar.Item
            icon={<i className="iconfont icon-findHouse"></i>}
            selectedIcon={<i className="iconfont icon-findHouse"></i>}
            title="找房"
            key="found"
            selected={location.pathname === '/home/found'}
            onPress={() => history.push('/home/found')}
            data-seed="logId1"
          >
            <Route component={Found} path="/home/found" ></Route>
          </TabBar.Item>
          <TabBar.Item
            icon={<i className="iconfont icon-infom"></i>}
            selectedIcon={<i className="iconfont icon-infom"></i>}
            title="资讯"
            key="news"
            selected={location.pathname === '/home/news'}
            onPress={() => history.push('/home/news')}
          >
            <Route component={News} path="/home/news" ></Route>
          </TabBar.Item>
          <TabBar.Item
            icon={<i className="iconfont icon-my"></i>}
            selectedIcon={<i className="iconfont icon-my"></i>}
            title="我的"
            key="mind"
            selected={location.pathname === '/home/mind'}
            onPress={() => history.push('/home/mind')}
          >
            <Route component={Mind} path="/home/mind" ></Route>
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}

export default Home; 